<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue待办事项</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- 这里是直接引入 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script> 
    <!-- 这里是引入本地的 -->
    <!--<script src="./vue.js"></script>-->
    <style>
        input{float:left;width: 130px;}
        #ab{float: left;width:80px;height:34px;color:white;border:none;outline:none;width: 60px;height: 30px;text-align: center;}
        .ck{height: 16px;margin-left: -10px; margin-top: 10px;}
        li{border-bottom: 1px solid black;margin-bottom: 10px;}
        #bt{margin-left: 45px;}
        #bt,#sbt{width:80px;height:34px;color:white;border:none;outline:none;width: 60px;height: 30px;text-align: center; }
    </style>
</head>
<body>
    <div id="app" style="border: 1px solid black;position: relative;margin:0 auto; left: 0; right:0; bottom:0; top:0;width: 400px;height: 400px;text-align: center;">
        <!-- {{content}}<br/> -->
        <h1 style="color: white;background-color: black;">待办事项</h1>
        <!-- v-model是一个指令，来对input标签里的数据进行绑定，
            限制在<input>、<select>、<textarea>、components中使用 -->
        <ul style="list-style: none;padding-left:0;">
            <!-- <li v-for="items in newsList" >
                <input class="ck" name ="" v-bind:checked="isChecked" type ="checkbox"/>
               <span>{{items.num}}-{{items.things}}
                <button id="bt" class="btn btn-success" v-show="!isChecked" type="submit" @click=finish>完成</button>
                <button id="sbt" class="btn btn-danger" type="submit" @click=deleteTodo>删除</button>
                
            </li> -->
            <!-- v-for 用于循环待办事项数组 其中item代表每条事项，index代表数组索引(0开始) -->
            <li v-for='(item,index) in todo'>
                <input class="ck" name ="" v-bind:checked="isChecked" type ="checkbox"/>
                <span>{{item}}</span>
                <button id="bt" class="btn btn-success" v-show="!isChecked" type="submit" @click=finish(index)>完成</button>
                <button id="sbt" class="btn btn-danger" type="submit" @click=deleteTodo(index)>删除</button>
                
            </li>
        </ul>
        <div class="search" style="position: absolute;margin-left: 40px;">
                 <input type="text" v-model="num"placeholder="编号">
                <input type="text" v-model="thing"placeholder="事项">
        <button id="ab" type="submit"  @click=add() class="btn btn-primary" >添加</button>
    </div>
    </div>
    <!-- <div>
        <h2>完成事项</h2>
        <ul>
            v-for 用于循环完成事项数组 其中item代表每条事项，index代表数组索引(0开始)
            <li v-for='(item,index) in finished'>
                <span>{{item}}</span>
                <button type="submit" @click=changeTodo(index)>未完成</button>
                <button type="submit" @click=deleteFinished(index)>删除</button>
            </li>
        </ul>
    </div> -->
    <script>
        new Vue({
            el:'#app',
            data:{
                content:"hello vue",
                thing:'', //v-model绑定
                num:'',
                todo:[],//待办事项
                finished:[],//已完成事项
                isChecked:false,
            //     newsList:[
            //     {num:'1',things:'待办事项1'},
            //     {num:'2',things:'待办事项2'},
            //     {num:'3',things:'待办事项3'},
            //     {num:'4',things:'待办事项4'},
            //     {num:'5',things:'待办事项5'},
            // ]
            },
            methods:{
                // 初始化item中的事项  暂时不用
               init(){
                this.items="1-待办事项1",
                this.items="2-待办事项2",
                this.items="3-待办事项3",
                this.items="4-待办事项4",
                this.items="5-待办事项5"
               },
                // 将input标签里的内容加入到todo(待办事项数组)
                add(){
                   this.todo.push(this.num+'-'+this.thing);
                   this.thing='';
                   this.num='';
                   this.isChecked=isChecked
                },
                // 将待办事项里完成的加入到finished(完成事项数组)
                finish(index){
                    // console.log(1);
                    // this.finished.push(this.todo[index]);
                    // 数组.splice(index,howmany)方法 
                    // index代表此项目位置(即在数组中的索引) howmany代表从此位置开始删除多少个
                    // this.todo.pop(index,1);
                    this.isChecked='true'

                },
                // 将完成事项改成待办事项
                // changeTodo(index){
                //     this.todo.push(this.finished[index]);
                //     this.finished.pop(index,1);
                // },
                // 对待办事项删除
                deleteTodo(index){
                    this.todo.pop(index,1);
                },
                // 对完成事项删除
                // deleteFinished(index){
                //     this.finished.pop(index,1);
                // }
            }
        })
    </script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>